<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

  

  <title>魔方宠物</title>

  <style>

    *{  

      margin: 0;

      padding: 0;

      border: 0;

      outline: 0;

      -webkit-appearance: none;

      -webkit-tap-highlight-color: transparent;

      -webkit-text-size-adjust: 100%;

      box-sizing: border-box;}

      html { overflow-x: hidden; overflow-y: auto; }

    a{

      text-decoration: none;

    }

    html{-ms-touch-action:none;}

    .img_div{

      position: relative;

     }

    .img_div img{width:100%;height:auto;line-height:0;vertical-align:top;display:block;}

    .img_div .cats{

      position: absolute;

      top: 2.6%;

      left: 33.5%;

      width: 41.5%;

      z-index: 1;

    }

    .img_div .ballon{

      position: absolute;

      top: 0.5%;

      left: 51%;

      width: 35%;

      -webkit-animation: bal 5s infinite linear;

      -o-animation: bal 5s infinite linear;

      animation: bal 5s infinite linear;

    }

    @keyframes bal {

      0% { left: 51%; }

      10% { left: 51.5%; }

      20% { left: 51%;  }

      30% { left: 50.5%; }

      40% { left: 51%; }

      50% { left: 51.5%; }

      60% { left: 51%;}

      70% { left: 50.5%; }

      80% { left: 51%; }

      90% { left: 51.5%; }

      100% { left: 51%; }

    }

    .img_div .windows{

      position: absolute;

      top: 0.8%;

      left: 9%;

      width: 13.5%;

    }

    .img_div .curtains-left{

      position: absolute;

      top: 1%;

      left: 9.5%;

      width: 10.5%;

      transform-origin: left top;

      -webkit-animation: curtainsl 5s infinite linear;

      -o-animation: curtainsl 5s infinite linear;

      animation: curtainsl 5s infinite linear;

    }

    @keyframes curtainsl {

      0% { transform: rotateZ(0deg); }

      10% { transform: rotateZ(-2deg); }

      20% { transform: rotateZ(-4deg); }

      30% { transform: rotateZ(-6deg); }

      40% { transform: rotateZ(-8deg); }

      50% { transform: rotateZ(-10deg); }

      60% { transform: rotateZ(-8deg); }

      70% { transform: rotateZ(-6deg); }

      80% { transform: rotateZ(-4deg); }

      90% { transform: rotateZ(-2deg); }

      100% { transform: rotateZ(0deg); }

    }

    .img_div .curtains-right{

      position: absolute;

      top: 1.2%;

      left: 16%;

      width: 10%;

      transform-origin: left top;

      -webkit-animation: curtainsr 5s infinite linear;

      -o-animation: curtainsr 5s infinite linear;

      animation: curtainsr 5s infinite linear;

    }

    @keyframes curtainsr {

      0% { transform: rotateZ(0deg); }

      10% { transform: rotateZ(-2deg); }

      20% { transform: rotateZ(-4deg); }

      30% { transform: rotateZ(-6deg); }

      40% { transform: rotateZ(-8deg); }

      50% { transform: rotateZ(-10deg); }

      60% { transform: rotateZ(-8deg); }

      70% { transform: rotateZ(-6deg); }

      80% { transform: rotateZ(-4deg); }

      90% { transform: rotateZ(-2deg); }

      100% { transform: rotateZ(0deg); }

    }

    

    .aside{position: fixed;right: 1em;top: 2em;z-index: 10;}

    .aside img{width: 2.6em;border:solid 1px #000;border-radius: 100%;}

    .aside .icon{margin:0.7em 0;}

    .download_fixed {

        z-index: 5;

        display: none;

        position: fixed;

        bottom: 0;

        width: 100%;

        height: 5em;

        background-color: rgba(255,255,255,0.7);

    }

    .download_fixed img {

        height: 3.5em;

        margin-left: 1em;

        margin-top: 1em;

    }

    .download_fixed a {

        display: inline-block;

        text-align: center;

        width: 5em;

        height: 2.2em;

        float: right;

        background-color: #fbc02d;

        color: #fff;

        border-radius: 5px;

        padding: 0.5em 0;

        margin-top: 5.5%;

        margin-right: 9%;

    }

    .download_fixed .close_df {

        position: absolute;

        right: 0;

        top: 0;

    }

    .download_fixed .close_df img {

        height: 2.5em;

        margin: 0;

    }

    .share_cover{

      display: none;

      position: absolute;

      left: 0;

      top: 0;

      background: rgba(0,0,0,0.8);

      z-index: 999;

    }

    .share_cover .share{

      position: fixed;

      top: 0;

      width: 100%;

      height: 15em;

      background: url(images/lead_share.png) 93% top no-repeat;

      background-size: 35% 42%;

    }

    .btn_left{

      display: block;

      position: absolute;

      bottom: 3em;

      width: 36%!important;

      left: 7%;

      height: 3em;

      -webkit-animation: btnl 1s linear infinite ;

      -o-animation: btnl 1s linear infinite ;

      animation: btnl 1s linear infinite ;

    }

    .btn_right{

      display: block;

      position: absolute;

      bottom: 3em;

      width: 36%!important;

      right: 2em;

      height: 3em;

      -webkit-animation: btnr 1s linear infinite ;

      -o-animation: btnr 1s linear infinite ;

      animation: btnr 1s linear infinite ;

    }



    @keyframes btnl {

      0% { left: 7%; }

      10% { left: 7.2%; }

      20% { left: 7%;  }

      30% { left: 6.8%;  }

      40% { left: 7%; }

      50% { left: 7.2%;  }

      60% { left: 7%;}

      70% { left: 6.8%;  }

      80% { left: 7%; }

      90% { left: 7.2%;  }

      100% { left: 7%;}

    }

    @keyframes btnr {

      0% { right: 2em; }

      10% { right: 2.05em; }

      20% { right: 2em;  }

      30% { right: 1.95em;  }

      40% { right: 2em; }

      50% { right: 2.05em;  }

      60% { right: 2em;}

      70% { right: 1.95em;  }

      80% { right: 2em; }

      90% { right: 2.05em;  }

      100% { right: 2em;}

    }

    @media (max-width: 375px) {

      .aside img{width: 2.5em;}

    }

    @media (max-width: 320px) {

      .aside img{width: 2em;}

      .download_fixed img {

          height: 3.8em;

      }

    }

  </style>

  <script>

    var _hmt = _hmt || [];

    (function() {

      var hm = document.createElement("script");

      hm.src = "https://hm.baidu.com/hm.js?03d04e4c7f9c2eee1db2549754958821";

      var s = document.getElementsByTagName("script")[0]; 

      s.parentNode.insertBefore(hm, s);

    })();

  </script> 

</head>

<body>

<aside class="aside">

 

          

  
 <a href="index.jsp" class="icon"><img src="aboutus/images/btn-downloadwhite.png" alt="返回主页">返回主页</a>


</aside>

<div class="img_div">

  <img src="aboutus/images/01.png" alt="">

  <img src="aboutus/images/02.png" alt="">

  <img src="aboutus/images/03.png" alt="">

  <img src="aboutus/images/04.png" alt="">

  <img src="aboutus/images/05.png" alt="">

  <img src="aboutus/images/06.png" alt="">

  <img src="aboutus/images/07.png" alt="">

  <img src="aboutus/images/pic-dogandcat.png" alt="" class="cats">

  <img src="aboutus/images/pic-ballon.png" alt="" class="ballon">

  <img src="aboutus/images/pic-windows.png" alt="" class="windows">

  <img src="aboutus/images/pic-curtains-left.png" alt="" class="curtains-left">

  <img src="aboutus/images/pic-curtains-right.png" alt="" class="curtains-right">

</div>




</body>







</html>